@extends('layouts.app-en')

@section('title', 'Home')

@section('header')
    @include('layouts.header-en')
@stop

@section('style')
	<style>
		.page {margin: 0 auto; text-align: center}
		.pagination>.active>span {background-color: #D33829; border-color: #D33829}
		.pagination>.active>span:hover {background-color: #D33829; border-color: #D33829}
		.pagination > li > a, .pagination > li > span { color:#444}
		.hy-row .hy-icon-new {
			position: absolute;
			top: 0;
			right: 15px;
			height: 74px;
			width: 74px;
		}
	</style>
@stop

@section('content')

	<div class="wrapper-trade">
		<div class="hy-tradebook">
			<div class="container">
				<div class="bg"></div>
				<div class="hy-tradebook-inner">
					<div class="achievement-leader">
						<div class="title">
							<h2>成果展示</h2>
							<h3>OUR BOOKS</h3>
							<div class="decorate2"></div>
						</div>
					</div>
					<div class="our_books hy-tradebook-row">
						<div class="row">
							@foreach($trade_recommends as $key => $recommend)
							<div class="col-md-3 col-xs-6 hy-row">
								<a href="{{ route('productInfo', ['uuid' => $recommend->product->uuid, 'language' => 'en']) }}" target="_blank" class="hy-tradebook">
									@if($recommend->product->is_new)
									<img src="{{ asset('statics/images/icon_new_tap_allpage.png') }}" class="hy-icon-new">
									@endif
									<img src="{{ asset('uploads/' . $recommend->product->cover[0]) }}" class="hy-image-cover" 
									alt="{{ $recommend->product->name }}">
									<span class="hy-tradebook-cover">{{ $recommend->product->name }}</span>
								</a>
							</div>
							@endforeach
						</div>
						<div class="page">
                            {!! $trade_recommends->render() !!}
                        </div>
					</div>
				</div>
			</div>
		</div>
	</div>

		@stop
        @section('footer')
	    	@include('layouts.footer-en')
		@stop

	@section('script')
	<script>
	  	//---------- back top -------------//
	    $("#scroll").click(function(){
	        $('body,html').animate({scrollTop:0},500);
	        return false;
	    });
	</script>
	@stop